<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head th:replace="dashboard/header :: header"></head>
<body>
	<div layout:fragment="content">
   
		<!-- ztree -->
		<link rel="stylesheet" th:href="@{/asserts/vendors/ztree/css/metroStyle/metroStyle.css}" type="text/css">

		<div class="container-div">
			<div class="animated fadeIn">
				<div class="row">
					<div>
						<div class="card col-lg-3 tree-card" style="float: left; margin-right: 0% ; overflow-x: hidden; overflow-y: scroll;">
							 <!-- 
						 	  <div class="card-body">
			                   		<ul id="treeDemo" class="ztree"></ul>	
			                  </div>
						 	   -->
			                  
			                  <div class="box box-main  search-collapse">
									<div class="box-header">
										<div class="box-title">
											<i class="fa icon-grid"></i> 应用列表
										</div>
										<div class="box-tools pull-right">
											<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i class="fa fa-chevron-up"></i></button>
											<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i class="fa fa-chevron-down"></i></button>
											<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新应用"><i class="fa fa-refresh"></i></button>
										</div>
									</div>
									<div class="ui-layout-content">
										<ul id="treeDemo" class="ztree"></ul>	
									</div>
								</div>
					
						</div>

						<div class="col-lg-9" style="float: left;">
							<div class="col-sm-12 search-collapse">
								<form id="operlog-form">
									<div class="select-list">
										<ul>
											<li>
												<label>所属应用 </label> 
												<input id="text-input" type="text" onclick="showApplication()" name="applicationIdLabel" readonly="readonly" style="cursor: pointer" placeholder="所属应用">
												<input type="hidden" id="applicationId" name="condition[applicationId]"  />
											</li>
											<li>
												<label>菜单名称  </label> 
												<input id="resourceName" name="condition[resourceName|like]" type="text" placeholder="菜单名称">
											</li>
											<li>
												<label>链接  </label> 
												<input id="resourceName" name="condition[resourceLink|like]" type="text" placeholder="链接">
											</li>
											<li>
												<a class="btn btn-success btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
												<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
											</li>
										</ul>
									</div>
								</form>
							</div>
								
								
								<div class="btn-group-sm" id="toolbar" role="group">
									<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
							            <i class="fa fa-remove"></i> 删除
							        </a>
							        <a class="btn btn-danger" onclick="$.operate.clean()">
						                <i class="fa fa-trash"></i> 清空
						            </a>
						            <a class="btn btn-warning" onclick="$.table.exportExcel()">
							            <i class="fa fa-download"></i> 导出
							        </a>
						        </div>
						        
								<div class="col-sm-12 select-table table-striped">
									<table id="bootstrap-table" data-mobile-responsive="true"></table>
								</div>
								
							</div>
					</div>
					<!-- /.col-->
				</div>
				<!-- /.row-->
			</div>
		</div>

	</div>

	<footer th:replace="dashboard/footer :: footer"></footer>
	
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.core.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.excheck.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/ztree/js/jquery.ztree.exedit.js}"></script>
	<script type="text/javascript" th:src="@{/asserts/vendors/jquery.form.autofill/jquery.formautofill.js}"></script>
	
	<script type="text/javascript">
		var setting = {
			async : {
				enable : true,
				url: ctx+"boot/platform/application/menusData" 
			},
			data : {
				simpleData : {
					enable : true,
					idKey : "id",
					pIdKey : "resourceParent",
					rootPId : 0
				},
				key : {
					name : "resourceName"
				}
			},
			callback : {
				onClick : zTreeOnClick 
				// onAsyncSuccess : zTreeOnAsyncSuccess
			}
		};
	
		function zTreeOnClick(event, treeId, treeNode) {
			console.log("tree node id = " + treeNode.id) ; 
			// $("input[id=selectResourceParentNode]").attr("data-id" ,treeNode.id) ; 
			// $("input[id=selectResourceParentNode]").attr("data-resourceName" ,treeNode.resourceName) ; 
			
			$("input[id=resourceParent]").val(treeNode.id) ;
			search() ; 
		};
	
		function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
			var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
			var nodes = treeObj.getNodes();
			for (var i = 0; i < nodes.length; i++) { //设置节点展开
				treeObj.expandNode(nodes[i], true, true , true);
			}
		}
	
		$(document).ready(function() {
			var treeObj = $.fn.zTree.init($("#treeDemo"), setting);
			treeObj.expandAll(true);
			
			var h = $(document).height() - 125 ; 
			$("div.tree-card").css("height" , h) ; 
		});
	</script>
	
	<script>
		var detailFlag = "";
		var prefix = ctx + "monitor/operlog";

		$(function() {
		    var options = {
		        url: ctx+"boot/platform/menus/datatables" ,
		        createUrl: ctx + 'boot/platform/menus/add' ,
		        updateUrl: ctx+"boot/platform/menus/modify?id={id}" ,
		        changeStatusUrl: ctx+"boot/platform/menus/changeStatus?id={id}" , 
		        cleanUrl: prefix + "/clean",
		        detailUrl: ctx+"boot/platform/menus/detail?id={id}",
		        removeUrl: ctx+"boot/platform/menus/delete" ,
		        exportUrl: prefix + "/export",
		        sortName: "operTime",
		        uniqueId:"id" ,
		        sortOrder: "desc",
		        modalName: "操作日志",
		        escape: true,
		        showPageGo: true,
		        rememberSelected: true,
		        columns: [{field: 'state',checkbox: true },
		        	
			        {field: 'applicationIdLabel', title: '所属应用'},
			        {field: 'resourceIcon', title: '图标' , align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                actions.push('<i class="fa '+value+'" aria-hidden="true">');
			                return actions.join('');
			          }
			        },
			        {field: 'resourceName', title: '名称'},
			        {field: 'resourceLink', title: '菜单链接'},
			        {field: 'menuTypeLabel', title: '类型'},
			        {field: 'hasStatusLabel', title: '状态', align: 'center',  formatter:function(value,row,index){ return $.table.status(value , row);}},
			        {field: 'updateTime' , title: '操作',  align: 'center',  formatter: function(value, row, index) {
			                var actions = [];
			                
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="editButton(\'' + row.id + '\')"><i class="fa fa-edit"></i>按钮</a> ');
			                actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
			                actions.push('<a class="btn btn-danger btn-xs" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a> ');
			                
			                return actions.join('');
			          }
			     }]
		    };
		    $.table.init(options);
		});

		// 编辑按钮 
		function editButton(_id){
			console.log("菜单 _id = " + _id) ; 
			 $.modal.open("编辑按钮", ctx+"boot/platform/menus/buttons") ; 
		}
		
		function searchPre() {
		    var data = {};
		    data.businessTypes = $.common.join($('#businessTypes').selectpicker('val'));
		    $.table.search('operlog-form', data);
		}
		
		function resetPre() {
			$.form.reset();
			$("#businessTypes").selectpicker('refresh');
		}
	</script>

	<script type="text/javascript">
		/*
		var dataTable;

		// key event
		function enterSearch() {
			$('#AlinesnoSearchForm input').each(function() {
				$(this).keyup(function(event) {
					if (event.keyCode == 13) {
						search();
					}
				});
			});
		}

		$(document).ready(function() {
			enterSearch();
			dataTable = $('#datatables').DataTable({
				"processing" : true,
				"serverSide" : true,
				"ajax" : {
					"url" : ctx+"boot/platform/menus/datatables",
					"type" : "POST",
					"data" : function(d) {
						console.log("d = " + d);
						var searchParams = paramsBuilder();
						if (searchParams) {
							$.extend(d, searchParams); // 添加扩展参数 
						}
					}
				},
				"searching" : false,
				"lengthMenu" : [ 10, 20, 30, 50 ],
				"displayLength" : 10,
				"scrollX" : true,
				"responsive" : true,
				"columns" : [ 
					{"data" : "applicationIdLabel"}, 
					{"data" : "resourceIcon"}, 
					{"data" : "resourceName"}, 
					{"data" : "resourceLink"}, 
					{"data" : "menuTypeLabel"}, 
					{"data" : "hasStatusLabel"} 
				],
				columnDefs : [
	            	  {    
	            		  "targets" : 1, //操作按钮目标列
						  "render" : function(data, type,row , meta) {
							  return '<i class="fa '+data+'" aria-hidden="true">' ; 
	            	  	  }
	            	  } 
		        ],
				"createdRow": function( row, data, dataIndex ) {
					$(row).attr('style', 'text-align: center;')
					$(row).children('td').eq(2).attr('style', 'text-align: left;')
					$(row).children('td').eq(3).attr('style', 'text-align: left;')
	            },
				"language" : {
					"processing" : "处理中...",
					"lengthMenu" : "显示 _MENU_ 项结果",
					"zeroRecords" : "没有找到相应的结果",
					"info" : "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
					"infoEmpty" : "第 0 至 0 项结果，共 0 项",
					"infoFiltered" : "(由 _MAX_ 项结果过滤)",
					"infoPostFix" : "",
					"search" : "搜索:",
					"searchPlaceholder" : "请输入要搜索内容...",
					"url" : "",
					"thousands" : "'",
					"emptyTable" : "表中数据为空",
					"loadingRecords" : "载入中...",
					"infoThousands" : ",",
					"paginate" : {
						"first" : "首页",
						"previous" : "上页",
						"next" : "下页",
						"last" : "末页"
					}
				},
				"dom" : '<"toolbar">frtip'
			});

			$("div.toolbar").html('<b>'
						+ '<button type="button" onclick="addItem()" class="btn btn-primary" style="float:right;margin-right:10px">添加</button>'
						+ '<button type="button" onclick="modifyItem()" class="btn btn-primary" style="float:right;margin-right:10px">修改</button>'
						+ '<button type="button" onclick="deleteMultipleItem()" class="btn btn-primary" style="float:right;margin-right:10px">删除</button>'
						+ '</b>');

			// 单选
			$('#datatables tbody').on( 'click', 'tr', function () {
				if ( $(this).hasClass('selected') ) {
					$(this).removeClass('selected');
				} else {
					dataTable.$('tr.selected').removeClass('selected');
					$(this).addClass('selected');
				}
				// 编辑
				editItem() ; 
			});

			// 多选
			$('#datatables tbody').on('click', 'tr', function() {
				$(this).toggleClass('selected');
			});
		});
		*/
		
		/**
		 * 刷新当前选择节点的父节点
		 */
		function refreshParentNode() {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			type = "refresh",
			silent = false,
			nodes = zTree.getSelectedNodes();
			/*根据 zTree 的唯一标识 tId 快速获取节点 JSON 数据对象*/
			var parentNode = zTree.getNodeByTId(nodes[0].parentTId);
			/*选中指定节点*/
			zTree.selectNode(parentNode);
			zTree.reAsyncChildNodes(parentNode, type, silent);
		}

		/**
		 * get params
		 */
		function paramsBuilder() {
			var param = {};
			$('#AlinesnoSortPanel input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#AlinesnoSearchForm input').each(function() {
				if ($(this).val() != '' && this.name != '') {
					param[this.name] = this.value;
				}

			});

			$('#trainingSearchForm .selectpicker').each(
					function() {
						console.log('value = ' + this.value + ' , value = ' + $(this).val());
						if ($(this).val() != null && $(this).val() != '' && this.name != '') {
							param[this.name] = $(this).val();
						}
					});
			return param;
		}

		// 添加
		function addItem() {
			layer.open({
				type : 2,
				title : '添加',
				shadeClose : true,
				shade : 0.8,
				maxmin : true, //开启最大化最小化按钮
				area : [ '600px', '800px' ],
				content : ctx+'boot/platform/menus/add'
			});
		}
		
		// 添加
		function modifyItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data() ; 
			if(selectRows.length == 0){
				layer.alert("编辑请选择元素.")
				return ; 
			}
			if(selectRows.length > 1){
				layer.alert("编辑请选择一条元素.")
				return ; 
			}
			var row = selectRows[0] ; 
			layer.open({type: 2,title: '修改',shadeClose: true,shade: 0.8,maxmin: true, area : [ '600px', '800px' ],
				  content: ctx+'boot/platform/menus/modify?id='+row.id 
			});	
		}

		// 删除多元素
		function deleteMultipleItem() {
			var selectRows = $('#datatables').DataTable().rows('.selected').data();
			var rowsId = new Array();
			for (var i = 0; i < selectRows.length; i++) {
				rowsId.push(selectRows[i].id);
			}
			$.post(ctx+"boot/platform/menus/delete", {
				rowsId : rowsId
			}, function(response) {
				console.log('response = ' + response);
				search(null) ; 
			})
			// refreshParentNode() ; 
		}

		// 删除单个元素
		function deleteSingleItem() {
			var selectRow = $('#datatables').DataTable().row('.selected');
			console.log("select row = " + selectRow);
			selectRow.remove().draw(false);
		}
		
		function editItem(){
			var id = $('#datatables').DataTable().rows('.selected').data()[0]['id'];
			// menusEditForm
			$.getJSON(ctx+"boot/platform/menus/detail?id="+id , function(response){
			 	console.log("response = " + response) ; 
			 	if(response.code == 200){
			 		$("form#menusEditForm").autofill(response.data);			 		
			 	}else{
			 		layer.alert(response.message) ; 
			 	}
			}) ; 
		}

		function showApplication(){
			var index = layer.open({
				type : 2,
				title : '应用管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '30%', '70%' ],
				content : ctx+'boot/platform/application/select' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-applicationName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("applicationId = " + id + " , applicationIdLabel = " + resourceName) ;
					
					$("input[name=applicationIdLabel]").val(resourceName) ; 
					$("input[id=applicationId]").val(id) ; 
			
					// search(null) ; 
					var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
					treeObj.reAsyncChildNodes(null, "refresh");
					
					layer.close(index) ; 
			 	}
			});		
		}
		
		function showResourceParent(){
			var index = layer.open({
				type : 2,
				title : '菜单管理',
				closeBtn:0 ,
				shadeClose : true,
				shade : 0.8,
				area : [ '40%', '80%' ],
				content : ctx+'boot/platform/menus/parents?id=1' , 
				btn: ['确认', '取消'] , 
				yes: function(index, layero){
					console.log("index = " + index + " layero = " + layero) ; 
					var selectResourceParentNode = $(layero).find("iframe")[0].contentWindow.document.getElementById("selectResourceParentNode")
					
					var resourceName = $(selectResourceParentNode).attr("data-resourceName") ; 	
					var id = $(selectResourceParentNode).attr("data-id") ; 	
					
					console.log("selectResourceId = " + id + " , selectResourceName = " + resourceName) ;
					
					$.table.refresh();
					
					$("input[name=resourceParentLabel]").val(resourceName) ; 
					$("input[name=resourceParent]").val(id) ; 
					
					layer.close(index) ; 
			 	}
			});		
		}
	</script>

</body>
</html>
